<template>
	<div class="search_main">
		<div class="search_input">
			<label @click="showSearchInputClickHandle" :class="isShowSearchInput ?'on': ''">
				<div class="search_input_main">
					<span>
						<i class="icon search"></i>
					</span>
					<span>搜索</span>
				</div>
				<input name="search" type="text" placeholder="搜索" :value="key.join(' ')" v-if="isShowSearchInput" @keyup.enter="searchInputHandle" />
			</label>
		</div>
		<Tags :keys="beforeKeys" v-if="beforeKeys.length>0" len="10" column="5"></Tags>
		<Tags :keys="hotNetKeys" v-if="hotNetKeys.length>0" len="10" column="2"></Tags>
		<!--div class="refresh_list">
			<a href="javascript:;" @click="refreshListClickHandle">刷新列表</a>
		</div-->
		<Groups @setDataObject="setDataObject" :feeds="feedsData" :keys="key" len="1000" @getFeedsHandle="getFeedsHandle"></Groups>
	</div>
</template>
<script>
	import Axios from 'axios';
	import qs from "Qs";
	const Cookie = window.Cookie();
	export default{
		name: "search",
		data: function(){
			return {
				key: ["中国"],
				isShowSearchInput: false,
				feedsData:this.$store.state.search.feedsData,
				currentUser:{},
				beforeKeys:[],
				hotNetKeys:[]
			}
		},
		watch:{
			feedsData:function(v){
				this.$store.commit("setSearchData", {
					feedsData: v
				})
			},
			key:function(v){
				this.getDefaultSearchNews(v);
			},
			$route:function(){
				if (this.$route.params.key){
					this.$set(this, "key", this.$route.params.key.split('%20'));
				}
			}
		},
		mounted:function(){
			if (this.$route.params.key){
				this.$set(this, "key", this.$route.params.key.split('%20'));
			}
			this.$emit("setDataObject", {type:"search", title:"搜索", showTip:false})
		},
		components:{
			Tags: r => require.ensure([], () => r(require('../components/tags.vue')), 'common_tags'),
			Groups: r => require.ensure([], () => r(require('../components/groups.vue')), 'groups')
		},
		methods:{
			getFeedsHandle(){
				this.getDefaultSearchNews(this.$data.key);
			},
			getDefaultSearchNews(v){
				console.log(v)
				let day = window.dateFormat(new Date().getTime());
					day = day.split('-');
				const that = this;
				const promise = new Promise((a, b) => {
					let userToken = Cookie.get('userToken');
					if (userToken){
						userToken = window.stringToJson(userToken, function(c){
							that.$set(that, "currentUser", c);
						});
						a(userToken)
					}else{
						a()
					}
				});
				promise.then((userToken) => {
					console.log(userToken)
					return new Promise((a,b) => {
						Axios.post(that.$store.state.api.getSearchNews, qs.stringify(userToken ? $.extend({
							key: v.join(' '),
							day: day.join('')
						},{
							username: userToken.name,
							userid: userToken.id,
							email: userToken.email
						}) : {
							key: v.join(' '),
							day: day.join('')
						})).then((res) => {
							console.log(res)
							if (res.data.status === 1){
								that.$set(that, 'feedsData', res.data.data);
								a(userToken)
							}else{
								b()
							}
						}).catch((err) => {
							b(err)
						})
					})
				}, (err) => {

				}).then((userToken) => {
					return new Promise((a,b) => {
						userToken ? Axios.post(that.$store.state.api.getBeforeKeys, qs.stringify({
							username: userToken.name,
							userid: userToken.id,
							email: userToken.email
						})).then((res) => {
							console.log(res)
							if (res.data.status === 1){
								that.$set(that, 'beforeKeys', res.data.data.reverse());
								a()
							}else{
								b()
							}
						}).catch((err) => {
							b(err)
						}) : a();
					});
				}, (err) => {

				}).then(() => {
					/*Axios.post(that.$store.state.api.getSearchHotKeys).then((res) => {
						console.log(res)
						if (res.data.status === 1){
							that.$set(that, 'hotNetKeys', res.data.data);
						}else{
						}
					}).catch((err) => {
						
					})*/
				}, (err) => {

				})
			},
			setDataObject(v){
				this.$emit("setDataObject", v);
			},
			showSearchInputClickHandle(e){
				this.$set(this, "isShowSearchInput", true)
			},
			searchInputHandle(e){
				const k = e.target.value;
				if (k.replace(/^\s+|\s+$/gim, '') !== ''){
					this.$set(this, "key", k.split(' '));
				}
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.search_main{
		margin:70/@base 0 0;
		padding:0 0 70/@base 0;
		.refresh_list{
			a{
				display:block;
				text-align: center;
				background-color: #e6e6e6;
				padding:10/@base;
				text-decoration: none;
				color:#999;
				font-size: 20/@base;
			}
		}
		.search_input{
			display:block;
			padding:5/@base 0;
			margin:0 0 10/@base 0;
			background-color: #fff;
			label{
				display:block;
				text-decoration: none;
				color:#999;
				font-size: 16/@base;
				height:60/@base;
				border:1/@base solid #ccc;
				margin:10/@base 20/@base;
				border-radius: 10/@base;
				overflow: hidden;
				&.on{
					display:flex;
					input{
						width:90%;
						transition: width 1s;
						border:0;
						padding:0 10/@base;
						color:#333;
					}
					.search_input_main{
						width:30/@base;
						transition: width 1s;
						height:6/@base;
						margin:0 0 0 20/@base;
						padding:16/@base 0;
						overflow: hidden;
					}
				}
				.search_input_main{
					width:70/@base;
					transition: width 1s;
					padding:20/@base 0;
					margin:0 auto;
					span{
						display:inline;
						float:left;
						margin:0 10/@base 0 0;
						i{
							&.icon{
								&.search{
									background-size: 355px 344px;
									background-position: -311px -213px;
									width:10px;
									height:10px;
									margin:5px 0 0;
								}
							}
						}
					}
				}
			}
		}
	}
</style>